<script setup>
import { onMounted, ref } from "vue";
import luckysheet from "luckysheet";
import CapacityB from "@/components/analysisSheetComponents/soil/tmpl95/capacityB.vue";
import { useAnalysetStore } from "@/store/index.ts";
import AnalyesAPI from "@/api/system/analyes.ts";
import { filterValidSampleAdatas, filterValidSamples } from "@/utils/method";
import Index from "@/components/analysisSheetComponents/component/index.vue";
import Device from "@/components/analysisSheetComponents/component/Device.vue";

let options = {
  container: "luckysheet", //luckysheet为容器id
  lang: "zh",
  autoCalculate: true,
  data: [
    {
      column: 12, // 列数
      defaultRowHeight: 30, // 自定义行高
      defaultColWidth: 100, // 自定义列宽
      celldata: [
        // 初始化表格数据，第一行包含表头
        { r: 0, c: 0, v: "样品编号" }, // A1
        { r: 0, c: 1, v: "类型" }, // B1
        { r: 0, c: 2, v: "wdm(%)  wH2O(%)" }, // B1
        { r: 0, c: 3, v: "元素：  " }, // B1
        { r: 1, c: 3, v: "稀释倍数f" }, // B1
        { r: 1, c: 4, v: "机读浓度ρ-ρ₀()" }, // B1
        { r: 1, c: 5, v: "样品浓度ω(  )" }, // B1
        { r: 1, c: 6, v: "测定结果" }, // B1
        { r: 0, c: 7, v: "元素：" }, // B1
        { r: 1, c: 7, v: "稀释倍数f" }, // B1
        { r: 1, c: 8, v: "机读浓度ρ-ρ₀(     )" }, // B1
        { r: 1, c: 9, v: "样品浓度ω(      )" }, // B1
        { r: 1, c: 10, v: "测定结果 " }, // B1
        { r: 0, c: 11, v: "备注" }, // B1
      ], // 初始化数据
      config: {
        merge: {
          "0_0": {
            r: 0, // 起始行
            c: 0, // 起始列
            rs: 2, // 跨越的行数
            cs: 1, // 跨越的列数
          },
          "0_1": {
            r: 0, // 起始行
            c: 1, // 起始列
            rs: 2, // 跨越的行数
            cs: 1, // 跨越的列数
          },
          "0_2": {
            r: 0, // 起始行
            c: 2, // 起始列
            rs: 2, // 跨越的行数
            cs: 1, // 跨越的列数
          },
          "0_3": {
            r: 0, // 起始行
            c: 3, // 起始列
            rs: 1, // 跨越的行数
            cs: 4, // 跨越的列数
          },
          "0_7": {
            r: 0, // 起始行
            c: 7, // 起始列
            rs: 1, // 跨越的行数
            cs: 4, // 跨越的列数
          },
          "0_11": {
            r: 0, // 起始行
            c: 11, // 起始列
            rs: 2, // 跨越的行数
            cs: 1, // 跨越的列数
          },
        }, // 合并单元格
        columnlen: {
          // 设置列宽
          0: 130, // 第一列宽度 100%
          1: 130, // 第二列宽度 120px
          2: 130, // 第三列宽度 180px
          3: 130, // 第四列宽度 100px
          4: 100, // 第五列宽度 200px
          5: 100, // 第六列宽度 100%
          6: 100, // 第六列宽度 100%
          7: 100, // 第六列宽度 100%
          8: 100, // 第六列宽度 100%
          9: 100, // 第六列宽度 100%
        }, // 表格列宽
      },
    },
  ],
  showinfobar: false, // 隐藏信息栏
  showtoolbar: true, // 隐藏工具栏
};
const tableOption = ref([{ table: "仪器名称", id: 1 }]);
const waterForm = ref({
  bdatas: {
    qxjhdcd: Array.from({ length: 4 }, () => ({
      qx_ypbh: "",
      qx_xdwc: "",
      qx_zkyq: "",
      qx_sfhg: "",
    })),
    bzsyyjrl: {},
    bzry: Array.from({ length: 2 }, () => ({
      ys: "",
      bzzbyph: "",
      bzzbynd: "",
      zbyyxrq: "",
      yqzbytj: "",
      drtj: "",
      zjynd: "",
      yqzjytj: "",
      bzdrtj: "",
      syynd: "",
      notes: "",
    })),
    syynd: {},
  },
  pxycd: Array.from({ length: 8 }, () => ({
    px_ys: "",
    px_ypbh: "",
    px_cdnd: "",
    px_pjz: "",
    px_xdwc: "",
    px_zkbz: "",
    px_sfhg: "",
  })),
  bzycd: [
    { bz_ys: "", bz_bzph: "", bz_cdnd: "", bz_bzz: "", bz_sfhg: "" },
    { bz_ys: "", bz_bzph: "", bz_cdnd: "", bz_bzz: "", bz_sfhg: "" },
  ],
  jbycd: Array.from({ length: 3 }, () => ({
    jb_ys: "",
    jb_ypbh: "",
    jb_jbhypnd: "",
    jb_bynd: "",
    jb_jbl: "",
    jb_yyphl: "",
    jb_jbhsl: "",
    jb_zkyq: "",
    jb_sfhg: "",
  })),
  unit: {},
  device: {
    device_name: [],
    device_model: [],
    device_number: [],
  },
});
const switchAB = ref(true);
const sheetData = ref("");
const jsonData = ref(null);
const analyseStatusPage = useAnalysetStore();
const record_sn = analyseStatusPage.waterForm.record_sn;
const processedData = ref([]);
const cDatas = ref([]);
const checkDialogVisible = ref(false);
const checkTime = ref("");
const switchAdd = ref(true);
const listB = ref({
  kbyList: [],
  qxyList: [],
  pxyList: [],
  bzyList: [],
});
// 在组件挂载后初始化 Luckysheet
onMounted(() => {
  // 初始化表格
  luckysheet.create(options);
  // 获取初始数据并保存在响应式变量中
  getWaterCapacity();
  getMethod();
});

// 获取信息(也要粘贴)
const getMethod = () => {
  // 任务编号
  waterForm.value.task_name = analyseStatusPage.waterForm.task_number; //任务名称
  waterForm.value.method = analyseStatusPage.waterForm.tableItem.test_method
    ? analyseStatusPage.waterForm.tableItem.test_method
    : analyseStatusPage.waterForm.tableItem.test_method_number; //分析方法
  waterForm.value.category_id =
    analyseStatusPage.waterForm.tableItem.sample_category; // 样品类别
};

// 获取——获取 水质容量A   工作表
const getWaterCapacity = () => {
  let josn = {
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    task_id: analyseStatusPage.waterForm.taskId,
    // id: 7,
    record_sn: record_sn,
    // record_sn: 49,
  };
  AnalyesAPI.getAnalyseACapacity(josn).then((data) => {
    // console.log("获取水质容量 A单", data);
    if (!Array.isArray(data) || data.length !== 0) {
      waterForm.value = data;
      waterForm.value.bdatas =
        Array.isArray(data.bdatas) && data.bdatas.length === 0
          ? {}
          : data.bdatas;
      waterForm.value.unit =
        Array.isArray(data.unit) && data.unit.length === 0 ? {} : data.unit;
      sheetData.value = data.configs;
      options.data = sheetData.value;
      luckysheet.create(options);
      processedData.value = data.adatas;
    } else {
      waterForm.value.device = {
        device_name: [],
        device_model: [],
        device_number: [],
      };
    }
  });
};

// 点击保存
const handleAddWaterPh = () => {
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON

  const data = options.data[0].data.map((row) => {
    return row
      .map((cell) => {
        return cell
          ? {
              field: cell.m || null,
              value: cell.v || null,
            }
          : null;
      })
      .filter((cell) => cell !== null); // 删除 null 值
  });
  // console.log(data, "data");
  // // 调用函数
  processedData.value = filterValidSampleAdatas(processData(data));
  cDatas.value = filterValidSamples(processDate(data));
  // console.log(processedData.value, cDatas.value, "data1");
  if (waterForm.value.check_status !== undefined) {
    delete waterForm.value.check_status;
    delete waterForm.value.reviewer_id;
  }

  // console.log(waterForm.value, "device");
  // //   调保存新增接口
  AnalyesAPI.addWaterCapacity({
    ...waterForm.value,
    record_sn: record_sn,
    // record_sn: 95,
    task_id: analyseStatusPage.waterForm.taskId,
    configs: sheetData.value,
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    adatas: processedData.value,
    cdatas: cDatas.value,
  }).then((data) => {
    // console.log("调接口拿数据", data);
    ElMessage.success("保存成功");
    switchAdd.value = false;
  });
};
const processData = (data) => {
  if (!data || data.length < 3) {
    return [];
  }

  // 提取表头信息
  const header1 = data[0]
    .map((item) => item.value)
    .filter((value) => value !== null);

  const header2 = data[1]
    .map((item) => item.value)
    .filter((value) => value !== null);

  // 提取数据行
  // const row = data[2].map(item => item.value);
  const row = data.slice(2).map((rowData) => rowData.map((item) => item.value));
  console.log(row, "row");
  // 构建嵌套结构
  const resultArray = [];
  for (let i = 0; i < row.length; i++) {
    const currentRow = row[i];
    const result = {
      [header1[0]]: currentRow[0] || null, // 样品编号
      [header1[1]]: currentRow[1] || null, // 类型
      [header1[2]]: currentRow[2] || null, // wdm(%) wH2O(%)
      [header1[3]]: {
        // 元素：1
        [header2[0]]: currentRow[3] || null, // 稀释倍数f
        [header2[1]]: currentRow[4] || null, // 机读浓度ρ-ρ₀()
        [header2[2]]: currentRow[5] || null, // 元素：1
        [header2[3]]: currentRow[6] || null, // 元素：1
      },
      [header1[4]]: {
        // 元素：2
        [header2[4]]: currentRow[7] || null, // 元素：2
        [header2[5]]: currentRow[8] || null, // 机读浓度ρ-ρ₀(     )
        [header2[6]]: currentRow[9] || null, // 样品浓度ω(      )
        [header2[7]]: currentRow[10] || null, // 样品浓度ω(      )
      },
      [header1[5]]: currentRow[11] || null, // 备注
    };
    resultArray.push(result);
  }
  console.log(resultArray, "resultArray");
  return resultArray;
};

// 剔除元素
const removeElementPrefix = (text) => {
  return text.replace(/^元素：\s*/, "");
};

// 剔除样品浓度ω( )
const extractBracketContent = (text) => {
  const match = text.match(/\((.*?)\)/);
  return match ? match[1] : text; // 如果匹配成功，返回括号内的内容，否则返回原文本
};
const processDate = (data) => {
  if (!data || data.length < 3) {
    return [];
  }

  // 提取表头信息
  const header1 = data[0]
    .map((item) => item.value)
    .filter((value) => value !== null);
  const header2 = data[1]
    .map((item) => item.value)
    .filter((value) => value !== null);
  // 提取数据行
  // const row = data[2].map(item => item.value);
  const row = data.slice(2).map((rowData) => rowData.map((item) => item.value));

  // 构建嵌套结构
  const resultArray = [];
  for (let i = 0; i < row.length; i++) {
    const currentRow = row[i];
    const result = {
      sample_sn: currentRow[0] || null, // 样品编号
      type: currentRow[1] || null, // 类型
      test_parms: analyseStatusPage.waterForm.tableItem.test_parms,
      [header1[2]]: currentRow[2] || null, // wdm(%) wH2O(%)
      datas: [
        {
          name: removeElementPrefix(header1[3]) || null,
          cdjg: currentRow[6] || null,
          dw: extractBracketContent(header2[2]) || null,
        },
        {
          name: removeElementPrefix(header1[4]) || null,
          cdjg: currentRow[10] || null,
          dw: extractBracketContent(header2[6]) || null,
        },
      ],
    };
    resultArray.push(result);
  }
  return resultArray;
};

const processBDatas = (data) => {
  if (!data || data.length < 3) {
    return [];
  }

  // 提取表头信息
  const header1 = data[0]
    .map((item) => item.value)
    .filter((value) => value !== null);
  const header2 = data[1]
    .map((item) => item.value)
    .filter((value) => value !== null);
  // 提取数据行
  // const row = data[2].map(item => item.value);
  const row = data.slice(2).map((rowData) => rowData.map((item) => item.value));

  // 构建嵌套结构
  const resultArray = [];
  for (let i = 0; i < row.length; i++) {
    const currentRow = row[i];
    const result = {
      sampleNumber: currentRow[0] || null, // 样品编号
      [header1[0]]: currentRow[0] || null, // 样品编号
      [header1[1]]: currentRow[1] || null, // 类型
      test_parms: analyseStatusPage.waterForm.tableItem.test_parms,
      [header1[2]]: currentRow[2] || null, // wdm(%) wH2O(%)
      ys1: {
        name: removeElementPrefix(header1[3]) || null,
        cdjg: currentRow[6] || null,
        dw: extractBracketContent(header2[2]) || null,
      },
      ys2: {
        name: removeElementPrefix(header1[4]) || null,
        cdjg: currentRow[10] || null,
        dw: extractBracketContent(header2[6]) || null,
      },
    };
    resultArray.push(result);
  }
  return resultArray;
};

const filterParallelSamples = (data) => {
  return data.filter((item) => item.类型 === "平行样");
};

const filterJbSamples = (data) => {
  // 筛选出类型为 "平行样" 的数据
  return data.filter((item) => item.类型 === "加标样");
};

const filterKbSamples = (data) => {
  return data.filter((item) => item.类型 === "空白样");
};

const filterQxSamples = (data) => {
  // 筛选出类型为 "平行样" 的数据
  return data.filter((item) => item.类型 === "校核点");
};

// 筛选出类型为 "质控样" 的数据，并提取括号中的内容
const filterAndExtract = (data) => {
  return data
    .filter((item) => item.类型 === "质控样")
    .map((item) => {
      // 使用正则表达式提取括号中的内容
      const match = item.sampleNumber.match(/\((.*?)\)/);
      const extractedValue = match ? match[1] : null; // 提取括号中的值
      return {
        ...item,
        extractedSampleNumber: extractedValue, // 添加提取出来的值
      };
    });
};

const handleSwitch = () => {
  switchAB.value = !switchAB.value;
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  const data = options.data[0].data.map((row) => {
    return row
      .map((cell) => {
        return cell
          ? {
              field: cell.m || "默认字段",
              value: cell.v || null,
            }
          : null;
      })
      .filter((cell) => cell !== null); // 删除 null 值
  });
  listB.value.kbyList = filterKbSamples(
    filterValidSampleAdatas(processBDatas(data))
  );
  listB.value.qxyList = filterQxSamples(
    filterValidSampleAdatas(processBDatas(data))
  );
  listB.value.pxyList = filterParallelSamples(
    filterValidSampleAdatas(processBDatas(data))
  );
  listB.value.bzyList = filterAndExtract(
    filterValidSampleAdatas(processBDatas(data))
  );
  listB.value.jbyList = filterJbSamples(
    filterValidSampleAdatas(processBDatas(data))
  );
  // console.log(listB.value);
};
</script>

<template>
  <div class="card">
    <div v-show="switchAB">
      <el-card class="box-card">
        <h1 style="text-align: center">
          土壤和沉积物 原子吸收分光光度法分析原始记录（A面）
        </h1>
        <div>SXLPHJ/JL/CX-22-95</div>
        <table class="table">
          <tr>
            <td colspan="2" style="width: 9%">任务编号</td>
            <td colspan="3">
              <el-input
                v-model="waterForm.task_name"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="1" style="width: 10%">采样日期</td>
            <td colspan="2">
              <el-input
                v-model="waterForm.sampling_time"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="1">分析日期</td>
            <td colspan="12">
              <el-input
                v-model="waterForm.anal_time"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <!--          选择仪器组件-->
          <Device :water-form="waterForm" :colspan="5" />
          <tr>
            <td colspan="2">分析方法</td>
            <td colspan="6">
              <el-input
                v-model="waterForm.method"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="1">分析项目</td>
            <td colspan="12">
              <el-input
                v-model="waterForm.fxxm"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2">环境条件</td>
            <td colspan="6">
              <div style="display: flex; align-items: center">
                <el-input
                  v-model="waterForm.temperature"
                  style="width: 100%; border: 1px solid transparent"
                  placeholder="请输入"
                >
                  <template #append>
                    <span style="background-color: transparent; color: black">
                      ℃
                    </span>
                  </template>
                </el-input>
                <el-input
                  v-model="waterForm.humidity"
                  style="width: 100%; border: 1px solid transparent"
                  placeholder="请输入"
                >
                  <template #append>
                    <span style="background-color: transparent; color: black">
                      %RH
                    </span>
                  </template>
                </el-input>
              </div>
            </td>
            <td colspan="1">检出限</td>
            <td colspan="12">
              <el-input
                v-model="waterForm.limit_val"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2">测定条件</td>
            <td colspan="6">
              <el-input
                v-model="waterForm.cdtj"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td colspan="1" rowspan="2">计算公式</td>
            <td colspan="12" rowspan="2">
              <el-input
                v-model="waterForm.js_formula"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td colspan="2">前处理过程</td>
            <td colspan="7">
              <el-input
                v-model="waterForm.process"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
        </table>
        <!--      <input id="uploadBtn" type="file" @change="loadExcel"/>-->
        <div id="luckysheet" style="width: 100%; height: 500px" />
        <table class="table">
          <tr>
            <td style="width: 5%">备注</td>
            <td>
              <el-input
                v-model="waterForm.notes"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
        </table>
      </el-card>
    </div>
    <div v-show="!switchAB">
      <capacity-b :water-form="waterForm" :list-b="listB" />
    </div>
    <!--    底部公共按钮-->
    <div>
      <Index
        :water-form="waterForm"
        :handle-add-water-ph="handleAddWaterPh"
        :handle-switch="handleSwitch"
        :get-water-capacity="getWaterCapacity"
        :switch-add="switchAdd"
        :switch-a-b="switchAB"
        :switch="true"
      />
    </div>
  </div>
</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* 表格边框合并 */
  text-align: left;
  /* 默认左对齐 */
  font-size: 14px;
  /* 字体大小 */
  color: #606266;
  /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf;
  /* 表格单元格边框颜色 */
  padding: 12px;
  /* 单元格内边距 */
}

.table th {
  background: #f5f7fa;
  /* 表头背景色 */
  font-weight: 600;
  /* 表头字体加粗 */
  color: #303133;
  /* 表头字体颜色 */
  text-align: center;
  /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
